<template>
  <div class="app-container">
    <!--编写ElementUI组件-->
    <el-button type="success" @click="addBefore()">新增</el-button>
    <br/>
    <!--表格-->
    <el-table
      ref="multipleTable"
      :data="tableData"
      tooltip-effect="dark"
      style="width: 100%">
      <el-table-column label="序号" type="index" width="50" align="center"></el-table-column>
      <el-table-column prop="user.userName" label="申请人" align="center" ></el-table-column>
      <el-table-column prop="applyMoney" label="申请金额" align="center" ></el-table-column>
      <el-table-column prop="applyDate" label="申请日期" align="center" ></el-table-column>
      <el-table-column prop="aState.applyStateName" label="状态" align="center" ></el-table-column>
      <el-table-column label="操作" min-width="120" align="center">
        <template slot-scope="scope">
          <el-button v-if="scope.row.applyState === -1" size="mini" type="primary" icon="el-icon-edit" @click="handleEdit(scope.row.applyId)">修改</el-button>
          <el-button v-else-if="scope.row.applyState === 2" size="mini" type="success" icon="el-icon-check" @click="reapplyApply(scope.row)">重新申请</el-button>
          <el-button v-else-if="scope.row.applyState === 0" size="mini" type="warning" icon="el-icon-delete" @click="withdrawApply(scope.row)">撤回</el-button>
          <el-button v-else-if="scope.row.applyState === 1" size="mini" type="danger" icon="el-icon-delete" @click="backBudget(scope.row)">归还贷款</el-button>
        </template>
      </el-table-column>
    </el-table>
    <br/>
    <!--分页栏-->
    <el-row>
      <el-col :span="20" align="center">
        <el-pagination background layout="prev, pager, next" :current-page="currentPage"
                       :hide-on-single-page="hidePage" :page-size="pageSize" :total="total" @current-change="page"></el-pagination>
      </el-col>
    </el-row>
    <!--新增弹窗-->
    <el-dialog title="新增请求" :visible.sync="addDialogVisible">
      <el-form :model="addForm" ref="addForm">
        <el-row >
          <el-col :span="20">
            <el-form-item label="申请人" >
              <el-input v-model="addForm.aUser.userName"  autocomplete="off" :disabled="true"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="申请金额"  :rules="[{ required: true, message: '金额不能为空'},
            { type: 'number', message: '金额必须为数字值'}]" prop="applyMoney">
              <el-input  type="applyMoney" v-model.number="addForm.applyMoney" autocomplete="off" :disabled="false"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row >
          <el-col :span="20">
            <el-form-item label="申请时间:">
              <el-input v-model="addForm.applyDate" :disabled="true"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addApply">确 定</el-button>
      </div>
    </el-dialog>
    <!--更新弹窗-->
    <el-dialog title="修改请求" :visible.sync="updateDialogVisible">
      <el-form :model="updateForm" ref="updateForm">
        <el-row >
          <el-col :span="20">
            <el-form-item label="申请人"  >
              <el-input v-model="updateForm.aUser.userName" autocomplete="off" :disabled="true"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="申请金额"  :rules="[{ required: true, message: '金额不能为空'},
            { type: 'number', message: '金额必须为数字值'}]" prop="applyMoney">
              <el-input  type="applyMoney" v-model.number="updateForm.applyMoney" autocomplete="off" :disabled="false"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row >
          <el-col :span="20">
            <el-form-item label="申请时间:">
              <el-input v-model="updateForm.applyDate" :disabled="true"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="updateDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="updateApply">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import request from '@/utils/cbp-request.js'
  import Cookies from 'js-cookie'
  // 编写vue.js代码
  export default {
    data() {
      return {
        currentPage:1,
        pageSize:10,
        total:0,
        hidePage:true,
        tableData:[],
        addDialogVisible: false,
        updateDialogVisible: false,
        user:{
          userId:'',
          userName:''
        },
        addForm:{
          aUser:{
            userId:'',
            userName:''
          },
          applyUser:'',
          applyMoney:'',
          applyDate:'',
          applyState:0
        },
        updateForm:{
          applyId:'',
          aUser:{
            userId:'',
            userName:''
          },
          applyUser:'',
          applyMoney:'',
          applyDate:'',
          applyState:0
        },
      }
    },
    methods: {
      getUser(){
        let userId=Cookies.get("user_id");
        request({
          url: '/user/'+userId,
          method: 'get',
        }).then((resp) => {
          this.user.userId=resp.data.userId;
          this.user.userName=resp.data.userName;
        })
      },
      addBefore(){
        this.addDialogVisible=true;
        this.addForm.aUser.userName=this.user.userName;
        this.addForm.aUser.userId=this.user.userId;
        this.addForm.applyUser=this.user.userId;
        var date = new Date();
        this.addForm.applyDate=date.getFullYear()+"-"+(date.getMonth()+1)+"-"+date.getDate();
      },
      addApply(){
        this.$refs['addForm'].validate((valid) => {
          if (valid) {
            request({
              url: '/apply',
              method: 'post',
              data:this.addForm
            }).then((resp) => {
              this.addDialogVisible = false;//关闭弹窗
              if (resp.status === 2000) {
                this.$message({
                  message: resp.msg,
                  type: 'success'
                });
                this.page(this.currentPage);//刷新
              }
            })
          } else {
            return false;
          }
        });
      },
      page(pageNum){
        var userId = Cookies.get('user_id');
        request({
          url:'/apply/page/'+pageNum+"/"+this.pageSize+"/"+userId,
          method:'get',
        }).then((resp) =>{
          this.tableData = resp.data.list;
          this.total = resp.data.total;
          this.currentPage = resp.data.pageNum;
        })
      },
      reapplyApply(apply){
        request({
          url: '/apply/reapply',
          method: 'put',
          data:apply
        }).then((resp) => {
          if (resp.status === 2000) {
            this.$message({
              message: resp.msg,
              type: 'success'
            });
            this.page(this.currentPage)//刷新
          }
        })
      },
      backBudget(apply){
        request({
          url: '/apply/backBudget',
          method: 'put',
          data:apply
        }).then((resp) => {
          if (resp.status === 2000) {
            this.$message({
              message: resp.msg,
              type: 'success'
            });
            this.page(this.currentPage)//刷新
          }
        })
      },
      withdrawApply(apply){
        request({
          url: '/apply/withdraw',
          method: 'put',
          data:apply
        }).then((resp) => {
          if (resp.status === 2000) {
            this.$message({
              message: resp.msg,
              type: 'success'
            });
            this.page(this.currentPage)//刷新
          }
        })
      },
      // 查询物品弹窗回显
      handleEdit(applyId) {
        request({
          url: '/apply/'+applyId,
          method: 'get',
        }).then((resp) => {
          this.updateDialogVisible = true;//打开弹窗
          this.updateForm.applyMoney = resp.data.applyMoney;//设置回显数据对象
          this.updateForm.applyUser = resp.data.applyUser;//设置回显数据对象
          this.updateForm.applyId = resp.data.applyId;//设置回显数据对象
          this.updateForm.aUser.userName=this.tableData[0].user.userName;
          this.updateForm.aUser.userId=this.tableData[0].user.userId;
          var date = new Date();
          this.updateForm.applyDate=date.getFullYear()+"-"+(date.getMonth()+1)+"-"+date.getDate();
        })
      },
      updateApply(){
        this.$refs['updateForm'].validate((valid) => {
          if (valid) {
        request({
          url: '/apply/update',
          method: 'put',
          data:this.updateForm
        }).then((resp) => {
          if (resp.status === 2000) {
            this.$message({
              message: resp.msg,
              type: 'success'
            });
            this.updateDialogVisible = false;//关闭弹窗
            this.page(this.currentPage)//刷新
          }
        })} else {
            return false;
          }
      })},
    },mounted() {
      this.page(1);
      this.getUser();
    }
  }
</script>

<style scoped>
  .app-container {
    position: relative;
    width: 100%;
    height: calc(100vh - 84px);
  }
</style>
